<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="searchRole" filterable remote placeholder="输入搜索的角色名称" size="small"
                               :remote-method="searchRoleBtn" :loading="searchRoleLoading" clearable>
                        <el-option v-for="(label,type) in roleList" :label="label" :value="type" :key="type" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="searchName" placeholder="用户名称" style="width: 120px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="status" placeholder="用户状态" style="width: 120px" size="small" clearable>
                        <el-option value="1" label="启用"></el-option>
                        <el-option value="0" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="source_from" placeholder="用户来源" size="small" style="width: 120px">
                        <el-option value="fs" label="飞书"></el-option>
                        <el-option value="gc" label="工厂"></el-option>
                        <el-option value="visitor" label="游客"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn" size="small">查询</el-button>
                    <el-button type="warning" icon="el-icon-plus" size="small" @click="addBtn">添加用户</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column prop="id" label="用户ID" width="90"></el-table-column>
                <el-table-column prop="name" label="用户名" width="100"></el-table-column>
                <el-table-column prop="phone" label="手机号码" width="100"></el-table-column>
                <el-table-column prop="role" label="角色" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <el-tag style="margin-right: 4px;" size="mini" type="primary" v-for="(role, index) in row.role" :key="index">
                            {{roles[role]}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_subject" label="当前登录" width="100"></el-table-column>
                <el-table-column prop="status" label="当前状态" width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=1 :inactive-value=0
                                   @change="changStatus(scope.$index, scope.row.status)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="source_from" label="用户来源" width="100">
                    <template slot-scope="scope">
                        {{scope.row.source_from=="gc"?"供应商":(scope.row.source_from=="fs"?"飞书":"游客")}}
                        <el-popover
                            v-if="scope.row.source_from=='fs'"
                            placement="left-start"
                            width="400"
                            trigger="hover">
                            <el-row>
                                <div v-for="(label, subject) in subjects" :key="subject" style="margin-bottom: 4px;"
                                     v-if="scope.row[subject+'_feishu_user_id']">
                                    <h4>{{ label }}</h4>
                                    <div>
                                        <span style="display: inline-block;width: 80px;">user_id：</span>
                                        <span>{{scope.row[subject+"_feishu_user_id"]}}</span>
                                    </div>
                                    <div>
                                        <span style="display: inline-block;width: 80px;">union_id：</span>
                                        <span>{{scope.row[subject+"_feishu_union_id"]}}</span>
                                    </div>
                                    <div>
                                        <span style="display: inline-block;width: 80px;">open_id：</span>
                                        <span>{{scope.row[subject+"_feishu_open_id"]}}</span>
                                    </div>
                                </div>

                            </el-row>
                            <el-button slot="reference" type="text" class="el-icon-info"></el-button>
                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openUser(scope.$index)">修改</el-button>
                        <!--<el-button type="text" class="el-icon-search">查看</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--用户设置-->
        <el-dialog title="用户设置" width="500px" :visible.sync="visible" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form>
                <el-form-item label="选择角色">
                    <el-select v-model="role" filterable remote placeholder="输入搜索的角色名称" size="small" style="width: 60%"
                               :remote-method="searchRoleBtn" :loading="searchRoleLoading" multiple collapse-tags clearable>
                        <el-option v-for="(label,type) in roleList" :label="label" :value="type" :key="type" ></el-option>
                    </el-select>
                    <span style="color: darkred">&nbsp;搜索输入</span>
                </el-form-item>
                <el-form-item label="手机换绑">
                    <el-input size="small" v-model.trim="phone" style="width: 60%" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="visible=false" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="updateUser" :loading="userLoading">更 新</el-button>
            </div>
        </el-dialog>

        <!--添加用户-->
        <el-dialog title="添加用户" width="500px" :visible.sync="addVisible" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form>
                <el-form-item label="选择角色">
                    <el-select v-model="addForm.role" filterable remote placeholder="输入搜索的角色名称" size="small" style="width: 60%"
                               :remote-method="searchRoleBtn" :loading="searchRoleLoading" clearable>
                        <el-option v-for="(label,type) in roleList" :label="label" :value="type" :key="type" ></el-option>
                    </el-select>
                    <span style="color: darkred">&nbsp;搜索输入</span>
                </el-form-item>
                <el-form-item label="用户来源">
                    <el-select v-model="addForm.source_from" placeholder="用户来源" style="width: 60%" size="small" disabled>
                        <el-option value="fs" label="飞书"></el-option>
                        <el-option value="gc" label="工厂"></el-option>
                        <el-option value="visitor" label="游客"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input size="small" v-model.trim="addForm.name" style="width: 60%" clearable></el-input>
                </el-form-item>
                <el-form-item label="换绑手机">
                    <el-input size="small" v-model.trim="addForm.phone" style="width: 60%" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="addVisible=false" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="addUser" :loading="userLoading">保 存</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import {userList, userSet, userAdd, userSubjects} from "@/api/user";
import {roleSearch} from "@/api/sys/role";

export default {
    name: 'all_user',
    props: {
        user: {
            type: Object,
            default: {}
        },
        subjects: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            isLoad: false,//子组件是否已加载过
            searchName: '',
            searchRole: '',
            status: '',
            source_from: 'fs',

            selectIndex: 0,
            data: [],
            roleList: {},
            searchRoleLoading: false,

            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            tableHeight: window.innerHeight-284,

            //用户设置
            role: '',
            roles: [],
            phone: '',
            visible: false,
            userLoading: false,

            //添加用户
            addVisible: false,
            addForm: {
                source_from: 'fs'
            },
        }
    },
    methods: {
        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm(msg+"用户，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                userSet(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        //打开修改
        openUser(index){
            this.role = this.data[index].role;
            this.phone = this.data[index].phone;
            this.selectIndex = index;
            this.roleList = JSON.parse(JSON.stringify(this.roles));
            this.visible = true;
        },
        //设置用户
        updateUser(){
            let param = {
                id: this.data[this.selectIndex].id,
                role: this.role,
                phone: this.phone
            };
            this.userLoading = true;
            userSet(param).then((res) => {
                this.userLoading = false;
                if(res.code === 0){
                    this.$message.success("提示：修改用户角色成功");
                    this.visible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.userLoading = false;
            });
        },
        //新增用户
        addUser(){
            if(!this.addForm.source_from || !this.addForm.phone || !this.addForm.name || !this.addForm.role){
                this.$message.warning("内容不能为空");
                return;
            }
            this.userLoading = true;
            userAdd(this.addForm).then((res) => {
                this.userLoading = false;
                if(res.code === 0){
                    this.$message.success("提示：新增用户成功");
                    this.addVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.userLoading = false;
            });
        },
        //角色搜索
        searchRoleBtn(query){
            if(query == ""){
                return;
            }
            this.getRoleData(query);
        },
        getRoleData(query){
            roleSearch({label: query}).then((res) => {
                this.roleList = res.data;
            });
        },
        //搜索按钮
        searchBtn(){
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page){
            this.page = page;
            this.getData();
        },
        //获取数据
        getData(){
            let param = {
                page: this.page,
                limit: this.limit,
                name: this.searchName,
                role: this.searchRole,
                status: this.status,
                source_from: this.source_from
            };
            this.loading = true;
            userList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
                this.roles = res.data.roles;
            }).catch(()=>{
                this.loading = false;
            });
        },
        addBtn(){
            this.addVisible = true;
            this.addForm = {
                source_from : this.source_from
            }
        },
    },
    mounted(){
        this.getRoleData("");
    },
}
</script>
